<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='test1'></div>   

    <script src="../demo1/js/react.development.js"></script>
     <script src="../demo1/js/react-dom.development.js"></script>
     <script src="../demo1/js/babel.min.js"></script>
     <script src="./js/prop-types.js"></script> 
     <!-- 全局有了 PropTypes -->
     <script type="text/babel">
       class Demo extends React.Component{

        showData2 = (event)=>{
            alert(event.target.value)
        }

        // 初始化状态
        state = {
            usernmae:'',
            password:''
        }

        // 存储用户名
        saveFormData = (datatype)=>{
            // console.log(e.target.name); // 1 普通方法
            // let key = e.target.name
            // this.setState({[key]:e.target.value})

            // 2 高阶函数 
            // 接收是参数是函数或返回的是函数 就是高阶函数
            return (e)=>{
                this.setState({
                    [datatype]:e.target.value
                })
            }
        }
        // 表单提交
        handleSunmit = (event)=>{
            // 阻止表单提交
            event.preventDefault()
            // 展示信息
            const {username, password} = this.state
            console.log('用户名:'+username, '密码:'+ password);
        }

           
        render() {
            let {username,password} = this.state

            // 非受控组件 -> 现用现取
            // 受空组件 ->  页面中的组件（如表单） 随着输入可以存储到状态中(state)  又在需要是可以从state中获取 
            return (
                <div>
                    <input onBlur={this.showData2}  type="text"/>

                    <form action="">
                        <input onChange={this.saveFormData('username')} name='username' type="text" placeholder="请输入用户名"  /><br/>
                        <input onChange={this.saveFormData('password')} name='password' type="password" placeholder="请输入密码"   id=""/><br/>
                        <button onClick={this.handleSunmit}>提交</button>
                        <div>{username}</div>
                        <div>{password}</div>    
                    </form>
                </div>
            )   
        }
       }

       ReactDOM.render(<Demo/>,document.querySelector('#test1'))

     </script>
</body>
</html>